<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.ljw.miniweb.board.bean.BoardBean" %>
<%
	String 	context_path 	= request.getContextPath();		// 컨텍츠패스
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>BoardList</title>
<link rel="stylesheet" type="text/css" href="css/main.css" />
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="js/jquery-1.4.2.js"> </script>
<script type="text/javascript">

	$(document).ready(function(){
		//각 버튼 초기화
		$("#menu").click(function(){
			$(location).attr("href", '<%=context_path%>' + "/login.ljw?method=main");
		});
		
		//신규등록 버튼 클릭시 등록 영역이 나타나며 글쓰기 버튼은 사라진다.
		$('#write').click(function(){
			$('#writeArea').css("display", "block");
			$('#write').css("display", "none");
			$('#menu').css("display", "none");
		});
		
		
		$('#insertContent').click(function(){
			if(confirm("저장하시겠습니까?") ){

				show();
				
				$.ajax({
					url : 'money.ljw?mode=write', 
					dataType : 'html',
					//data : $('#frm').serialize() ,
					data : '&usdDate=' + $('#useDate').val() + '&useAmt=' + $('#useAmt').val() +'&useCategory=' + $('#useCategory').val(),
					
					success: function(data){
						alert( "저장되었습니다" );
	
						/*리스트를 다시 불러온다 */
						$('#moneyList').html('');
						$('#moneyList').html(data);
	
						/*입력값을 초기화 시킨다 */
						reset();

						/*로딩바를 감춘다*/
						setTimeout("hidden();", 1000);
					},
					 error:function(x,e){
		                if(x.status==0){
		                	alert('You are offline!!\n Please Check Your Network.');
		                }else if(x.status==404){
		                	alert('Requested URL not found.');
		                }else if(x.status==500){
		                	alert('Internel Server Error.');
		                }else if(e=='parsererror'){
		                	alert('Error.\nParsing JSON Request failed.');
		                }else if(e=='timeout'){
		                	alert('Request Time out.');
		                }else {
		                	alert('Unknow Error.\n'+x.responseText);
		                }
		                //실패했을 경우 화면을 다시 보여준다
		                hidden();
		          }
				});  //end ajax
			}//end confirm	
		});
		
		
		function reset(){
			$('#title').val('');
			$('#content').val('');
			$('#writeArea').css("display", "none");
			$('#write').css("display", "");
			$('#menu').css("display", "");
			$('#menuButton').css("display", "block");
			
		}

		function hidden(){
			$('#ing').css("display", "none");
		}

		function show(){
			$('#ing').css("display", "block");
		}
		
	});


</script>
</head>
<body>
	<!-- 메인영역 -->
	<div class="container">
		<div id="moneyList">
			<table>
				<tr>
					<th>No</th>
					<th>Date</th>
					<th>Amount</th>
					<th>category</th>
				</tr>
				
				<c:forEach items ="${list}" var="listRecord">
				<tr>
					<td><c:out value="${listRecord.seq}" /></td>
					<td><c:out value="${listRecord.useDate}" /></td>
					<td><c:out value="${listRecord.useAmount}" /></td>
					<td><c:out value="${listRecord.useCategory}" /></td>
				</tr>
				</c:forEach>
			</table>
		</div> 
		
		<!-- 등록영역 -->
		<div id="writeArea">
			<form name="frm" id="frm">
				사용날짜 : <input type="text" name="useDate" id="useDate" style="width:200px;" />
				사용금액 : <input type="text" name="useAmt" id="useAmt" style="width:200px;" />
				사용항목 : <input type="text" name="useCategory" id="useDate" style="width:200px;" />
				
				<input type="button" id="insertContent" value="regist"/>
				<input type="button" id="return" value="return"/>
			</form>
		</div>
		
		
		
		<!-- 버튼 영역 -->
		<div>
			<div class="menuButton">
					<input type="button" name="write" id="write" value="write"/>
					<input type="button" name="menu" id="menu" value="menu"/>
			</div>
		</div>
	</div>
	
	<!-- progress 영역 -->
	<div class="ing" id="ing">
			<div class="inginner">
				<img src="./img/progress.gif"/>
			</div>
	</div>
</body>
</html>